<template>
	<!-- NAV -->
	<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
	  <!-- Brand and toggle get grouped for better mobile display -->
	  <div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	      <span class="sr-only">Toggle navigation</span>
	      <span class="icon-bar"></span>
	      <span class="icon-bar"></span>
	      <span class="icon-bar"></span>
	  </button>
	  <div class="navbar-brand hidden-xs"><img id="logo" src="../assets/img/logo.png"></div>
	  </div>

	  <!-- Collect the nav links, forms, and other content for toggling -->
	  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	  
	    <ul class="nav navbar-nav navbar-right" id="nav-bar">
	        <li><router-link tag='a' to='/' @click.native="closePanel">首页</router-link></li>
	        <li><router-link tag='a' :to="{name:'recommend',params:{categoryId:'all',pageTitle:'推荐文章'}}" @click.native="closePanel">推荐文章</router-link></li>
	        <li><router-link tag='a' to='/aboutblog' @click.native="closePanel">关于BLOG</router-link></li>
	        <li><router-link tag='a' to='/aboutleil' @click.native="closePanel">关于LEIL</router-link></li>
	    </ul>
	  
	  </div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
	</nav>
	<!-- NAV -->
</template>

<script>

function initNav() {
	$("#nav-bar").lavaLamp({
	  fx: "backout", 
	  speed: 700,
	  setOnClick:true,
	  click: function(element) {
	    return
	  }
	  
	})
}

export default {
	mounted: function() {
		if ($(window).width() >= 768) {
			initNav()
		}
	},
	methods: {
		closePanel: function() {
			$('#bs-example-navbar-collapse-1').collapse('hide')
		}
	}
}
</script>